<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <script src="/static/dist/lib/sortable/zui.sortable.min.js"></script>
    <style>
        /* 为可拖动的条目应用可移动光标类型 */
        #sortableList > .list-group-item {cursor: move}

        /* 为正在被拖动的条目应用半透明外观 */
        #sortableList > .list-group-item.dragging {
            visibility: visible;
            opacity: .3;
        }

        .loadMore {
            text-align: center;
            padding: 15px;
        }
        .loadMore button {
            border-radius: 20px;
            width: 85px;
            line-height: 2.3;
        }
    </style>
    <div class="toolbar-row">
        <div class="btn-toolbar">
            <div class="btn-group">
                <a class="btn btn-lg btn-uploader-file"><i class="icon icon-plus"></i>上传照片/视频(原装)</a>
                <a class="btn btn-lg btn-uploader-file-w"><i class="icon icon-plus"></i>上传照片/视频(基于WebUpload)</a>
            </div>
        </div>
    </div>

    <hr>

    <div class="list-row">
        <div class="cards">
        </div>
        <div class="loadMore">
            <button class="btn btn-mini loadMore_btn" type="button">加载更多</button>
        </div>
    </div>
    <script type="application/javascript">

        var pageNo = null;

        function initFileList() {
            var recPerPage = 12;
            if (null == pageNo) {
                pageNo = 1;
                recPerPage = 12;
            }
            $.post('/admin/activity/mediaLibrary/list', {
                "recPerPage": recPerPage,
                "page": pageNo
            }, function (res) {
                if(res && res.result == 'success'){
                    var _html = "";
                    var _datas = res.data;
                    if(_datas.length < 1){
                        $('.loadMore_btn').hide();
                        new $.zui.Messager('已经到底啦', {
                            icon: 'bell', // 定义消息图标
                            type: 'warning'
                        }).show();
                        return false;
                    } else if(_datas.length < 12) {
                        $('.loadMore_btn').hide();
                        new $.zui.Messager('已经到底啦', {
                            icon: 'bell', // 定义消息图标
                            type: 'warning'
                        }).show();

                    }
                    for(var d in _datas) {
                        _html += "<div class=\"col-md-4 col-sm-6 col-lg-3 sortable-item\" pagerNo=\""+ pageNo +"\">";
                        _html += "<a class=\"card\" href=\"###\" >";
                        _html += "<div class=\"media-wrapper\" src=\""+_datas[d].fileNeturl+"\" alt=\""+_datas[d].fileName+"\" data-group=\"image-group-"+_datas[d].id+"\" style='height: 180px;'>";
                        _html += "<img data-toggle=\"lightbox\" src=\""+_datas[d].fileNeturl+"\" data-image=\""+_datas[d].fileNeturl+"\" data-caption=\""+_datas[d].fileName+"\" alt=\""+_datas[d].fileName+"\" >";
                        _html += "</div>";
                        _html += "<div class=\"card-heading\"><strong>"+_datas[d].fileName+"</strong></div>";
                        _html += "<div class=\"card-actions\">";
                        _html += "<div style=\"float: left!important;padding-right: 5px;\" class='activity_file_edit'><i class=\"icon-edit\"></i> </div>";
                        _html += "<div style=\"float: left!important;\" class='activity_file_del'><i class=\"icon-trash\"></i> </div>";
                        _html += "<div class=\"pull-right\"><i class=\"icon-comments-alt\"></i> 0</div>";
                        _html += "<div class=\"pull-right text-danger\" style=\"padding-right: 5px;\"><i class=\"icon-heart-empty\"></i> 0</div>";
                        _html += "</div>";
                        _html += "<div class=\"card-actions\">";
                        _html += "</div>";
                        _html += "</a>";
                        _html += "</div>";

                    }
                    $('.cards').append(_html);

                    $('.media-wrapper').each(function (e) {
                        var _image = $(this).attr('src');
                        var _title = $(this).attr('alt');
                        $(this).lightbox({
                            image: _image,
                            caption: _title
                        });
                    });
                    $('.activity_file_edit').on('click', function () {
                        new $.zui.Messager('媒体库图片禁止编辑', {
                            icon: 'bell', // 定义消息图标
                            type: 'warning'
                        }).show();
                    });
                    $('.activity_file_del').on('click', function () {
                        new $.zui.Messager('正在删除媒体库指定图片', {
                            icon: 'bell', // 定义消息图标
                            type: 'info'
                        }).show();
                    });

                }else{
                    new $.zui.Messager('列表加载失败，请联系管理员。', {
                        type: 'danger',
                        icon: 'frown',//smile
                        close: true,
                        placement: 'center' // 定义显示位置
                    }).show();
                }
            });
        }

        function setSortableOption() {
            // 定义选项对象
            var options = {
                selector: '.sortable-item',
                finish: function(e) {
                    console.log('排序完成：', e);
                    console.log($('.cards').data('zui.sortable').getItems(true));
                },
                // 设置更多选项...
            };

            // 初始化时传入选项参数
            $('.cards').sortable(options)
        }

        function initListener() {
            $('.btn-uploader-file').click(function () {
                new $.zui.Messager('即将打开新增窗口', {
                    icon: 'heart',
                    placement: 'center' // 定义显示位置
                }).show();
                $('body').hrefClick('/admin/activity/mediaLibrary/upload');
            });
            $('.btn-uploader-file-w').click(function () {
                new $.zui.Messager('即将打开新增窗口', {
                    icon: 'heart',
                    placement: 'center' // 定义显示位置
                }).show();
                $('body').hrefClick('/admin/activity/mediaLibrary/uploadw');
            });

            $('.loadMore_btn').on('click', function () {
//                console.log($('.cards div:last').html(''));
//                console.log($('. div:last-child').html());
                var _cardsChildens = $('.cards').children();
                var pagerNo = $(_cardsChildens[_cardsChildens.length -1]).attr('pagerno');
                pageNo = Number(pagerNo) + 1;
                new $.zui.Messager('已经到底不要再拉啦', {
                    icon: 'bell', // 定义消息图标
                    type: 'info'
                });
                console.log(pageNo);
                initFileList();
            });
        }

        $(function () {
            initFileList();
            setSortableOption();
            initListener();



            //页面拉到底时自动加载更多
//            $(window).scroll(function(event){
//                var wScrollY = window.scrollY; // 当前滚动条位置
//                var wInnerH = window.innerHeight; // 设备窗口的高度（不会变）
//                var bScrollH = document.body.scrollHeight; // 滚动条总高度
//                if (wScrollY + wInnerH >= bScrollH) {
//                    //
//                    console.log('到底了');
//                    new $.zui.Messager('已经到底不要再拉啦', {
//                        icon: 'heart',
//                        placement: 'center' // 定义显示位置
//                    }).show();
//                }
//            });
        });

    </script>
</div>
</body>
</html>